03. Fonts

            <!--Google Fonts-->
            
              @import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
            
          

05. Source File (CSS)

            <link rel="stylesheet" href="assets/css/bootstrap.min.css">
            <link rel="stylesheet" href="assets/css/animate.css">
            <link rel="stylesheet" href="assets/css/all.min.css">
            <link rel="stylesheet" href="assets/css/swiper.min.css">
            <link rel="stylesheet" href="assets/css/lightcase.css">
            <link rel="stylesheet" href="assets/css/style.css">
          

06. Source File (JS)

            <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
            <script src="assets/js/vendor/modernizr-3.11.2.min.js"></script>
            <script src="assets/js/isotope.pkgd.min.js"></script>
            <script src="assets/js/swiper.min.js"></script>
            <script src="assets/js/wow.js"></script>
            <script src="assets/js/lightcase.js"></script>
            <script src="assets/js/jquery.countdown.min.js"></script>
            <script src="assets/js/waypoints.min.js"></script>
            <script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
            <script src="assets/js/plugins.js"></script>
            <script src="assets/js/main.js"></script>
          

Logo Type

To change logotype in the navigation panel, find image images/logo/logo.png and replace it with your logo.

Note: Keep your logo inside the assets/imaegs/logo folder. The logo size should be minimum 93x23 pixel.

Menu Bar with logo

This is logo and navigation codes.

            <ul>
              <li class="active">
                <a href="#0">Home</a>
                <ul>
                  <li><a href="index.html" class="active">Home Page One</a></li>
                  <li><a href="index-2.html">Home Page Two</a></li>
                  <li><a href="index-3.html">Home Page Three</a></li>
                </ul>
              </li>
              <li>
                <a href="#0">Pages</a>
                <ul>
                  <li><a href="about.html">About Us</a></li>
                  <li><a href="membership.html">Membership</a></li>
                  <li><a href="comingsoon.html">comingsoon</a></li>
                  <li><a href="404.html">404</a></li>
                </ul>
              </li>
              <li>
                <a href="#0">Community</a>
                <ul>
                  <li><a href="community.html">Community</a></li>
                  <li><a href="group.html">All Group</a></li>
                  <li><a href="members.html">All Members</a></li>
                  <li><a href="activity.html">Activity</a></li>

                </ul>
              </li>
              <li>
                <a href="#0">Shops</a>
                <ul>
                  <li><a href="shop.html">Product</a></li>
                  <li><a href="shop-single.html">Product Details</a></li>
                  <li><a href="shop-cart.html">Product Cart</a></li>
                </ul>
              </li>
              <li>
                <a href="#0">Blogs</a>
                <ul>
                  <li><a href="blog.html">Blog</a></li>
                  <li><a href="blog-2.html">Blog Style Two</a></li>
                  <li><a href="blog-single.html">Blog Details</a></li>
                </ul>
              </li>
              <li><a href="contact.html">contact</a></li>
            </ul>
          

Here is your main logo code. To add your logo, replace logo.png from images/logo/ directory with your logo in PNG format.

<img src="assets/images/logo/logo.png" alt="Ollya" >

Tab Customization

To change the tab heading you will need to edit in the tag <li>Here is your heading</li> and add your text in the middle of the tag.

To change the tab tagline you will need to edit in the tag <p>Here is your tagline</p> and add your text in the middle of the tag.

Which tab item you want to take as active you have to add active class to that "tab-item" class and li tag.

Section Styles

Here is your section structure.

            <section class="class padding--top padding--bottom">
              <div class="container">                  
                <div class="section__header">
                ...
                </div>
                <div class="section__wrapper">
                ...
                </div>
              </div>
            </section>
          

If you need another style of section header - just you add "left style"class

In the class="section-class" you can replace with your desired class.

the class padding-top and padding-bottom is the space between each sections.

And in the section-header div you can add your heading of sections and tagline of sections.

You can add your content on the 2nd row div.

Section With Background

            <section class="class padding--top padding--bottom bg_img" style="background-image: url();">
              <div class="container">
                ...
              </div>
            </section>    
          

you can select background color between light and dark color. To add cloud color, just simply add the class body-bg, section-bg to the section class.

Ollya Utility

You can use next modification classes to set block margins and paddings:

mt-1 ... mt-5

mb-1 ... mb-5

pt-1 ... pt-5

pb-1 ... pb-5

Contact Us Customization

Edit contact information in assets/contact.php — folder.

07. How to Change Contact Form Email

            $recipient =  "yourgmail@gmail.com";
          

Custom Appear Animation

If you want to use appear animation for some element, you need to add class wow fadeIn to this element and set data attribute like this:

            <div class="wow fadeIn" data-wow-delay="0.1s" data-wow-duration="2s">
            ...
            </div>
          

The full list of appear animation effects you can find here - http://daneden.github.io/animate.css/

08. Change Copyright

            <div class="footer__content text-center">
              <p class="mb-0">All Rights Reserved © <a href="index.html">Ollya</a> || Design By: CodexCoder</p>
            </div>
          

Support

If you have any questions, feel free to contact us at support@codexcoder.com.